var menuBtn = document.getElementById('btn_menu');
var menu = document.getElementsByClassName('menu')[0];
var btnPart = menuBtn.children;
var btnPartLen = btnPart.length;
var open = false;


menuBtn.onclick = function () 
{
  if (!open) {
    menuBtnChange('1.5rem')
    btnPart[0].classList.add("menu-line-tr");
    btnPart[0].classList.add("menu-line-tr-1");
    btnPart[1].style.opacity = '0';
    btnPart[2].classList.add("menu-line-tr");
    btnPart[2].classList.add("menu-line-tr-2");
    open = true;
    menu.style.transform = 'translateX(0)';
    menu.style.transition = 'transform 0.25s ease-in-out ';
  } else {
    menuBtnChange('1.5rem')
    menuDown()
  }
}

function menuBtnChange(btnWidth)
{
  for (var i = 0; i < btnPartLen; i++) {
    btnPart[i].style.width = btnWidth;
  }
}

function menuDown()
{
  btnPart[0].classList.remove("menu-line-tr");
    btnPart[0].classList.remove("menu-line-tr-1");
    btnPart[1].style.opacity = '1';
    btnPart[2].classList.remove("menu-line-tr");
    btnPart[2].classList.remove("menu-line-tr-2");
  open = false;
  menu.style.transform = 'translateX(-100%)';
}